<template>
  <v-card class="" flat width="100%">
    <v-row no-gutters justify="center" class="" style="flex-wrap:unset">
      <v-col cols="auto" class="pb-0">
        <v-avatar size="32">
          <v-img
            :src="rcmt.avatar"
          ></v-img>
        </v-avatar>
      </v-col>
      <v-col>
        <v-col class="py-0">
          <span class="d-inline-block text-truncate text-body-2" style="max-width: 150px">
            {{rcmt.username}}
            <span class="blue-grey--text text--lighten-3 text-body-2"
              >{{rcmt.sign}}</span
            >
          </span>
        </v-col>
        <v-col class="py-0 text-body-2">回复 <span class="blue--text text--darken-3">{{rcmt.reply_username}}</span>：{{rcmt.content}}</v-col>
        <v-col class="pt-0">
          <v-row
            align="center"
            class="blue-grey--text text--lighten-3 text-body-2"
          >
            <v-col class="pr-0">48分钟前</v-col>
            <v-col cols="auto" class="px-0">
              <v-btn tile text block depressed plain bottom>
                <v-icon small class="blue-grey--text text--lighten-3">
                  mdi-thumb-up-outline
                </v-icon>
              </v-btn>
            </v-col>
            <v-col cols="auto" @click="getSubCommentContain()" class="px-0">
              <v-btn
                tile
                text
                block
                depressed
                plain
                bottom
                class="blue-grey--text text--lighten-3 px-0"
              >
                <v-icon small class="blue-grey--text text--lighten-3">
                  mdi-comment-outline </v-icon
                >回复
              </v-btn>
            </v-col>
          </v-row>
          <v-row v-if="sub_status">
            <SubPublish
              :placeholder="'回复'+rcmt.username+'...'"
              :index="'reply-'+rcmt.id"
              @getSubCommentContain="getSubCommentContain"
              :fstaus="true"
            />
          </v-row>
        </v-col>

      </v-col>
    </v-row>
  </v-card>
</template>

<script>
import SubPublish from '~/components/mistalk/SubPublish'

export default {
  components: { SubPublish },
  props: {
    id: String,
    rcmt:Object
  },
  data: () => ({
    sub_status: false,
  }),
  created() {

  },
  methods: {
    getSubCommentContain(){
      this.sub_status = this.sub_status ? false : true
    }
  },
}
</script>

<style></style>
